<template>
	<view class="page">
		<view class="page-menu">
			<view class="info_data">
				<u-row gutter="16" >
					<u-col span="2">
						<view class="demo-layout" style="margin-left: 20rpx;">
							<u-checkbox-group @change="CheckedAll">
							  <u-checkbox v-model="checkedAll" shape="square" active-color="#FFC694"></u-checkbox>
							</u-checkbox-group>
						</view>
					</u-col>
					<u-col span="2">
						<view class="demo-layout">序号</view>
					</u-col>
					<u-col span="6">
						<view class="demo-layout">内容</view>
					</u-col>
					<u-col span="2">
						<view class="operation" style="margin-left: -10rpx;">操作</view>
					</u-col>
				</u-row>
				<scroll-view class="wrap_right_bottom_scroll" :scroll-top="scrollTop" scroll-y="true" @scroll="scroll" scroll-with-animation="true">
					<view class="row_u" v-for="(item,index) in program" :key="index" :class="{changeStylebg:item.checked == true}">
						<u-row calss="row-u" gutter="16">
							<u-col span="2">
								<view class="demo-layout" style="margin-left: 20rpx;">
									<u-checkbox-group >
										<u-checkbox v-model="program[index].checked" shape="square" active-color="#FFC694"></u-checkbox>
									</u-checkbox-group>
								</view>
							</u-col>
							<u-col span="2" >
								<view class="demo-layout">{{item.serial}}</view>
							</u-col>
							<u-col span="6">
								<view class="demo-layoutTwo">
									<view class="cen_title">
										{{item.content}}
									</view>
								</view>
							</u-col>
							<u-col span="2">
								<view class="demo-layout" style="margin-left: -10rpx;">
									<view class="ss" @click="up()">
										<image class="imgUp" src="../../static/img/up.png" mode=""></image>
									</view>
									<view class="" @click="descend()">
										<image class="imgDescend" src="../../static/img/descend.png" mode=""></image>
									</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="bottom">
		  <view class="bottom_but" @click="generate">
			<span class="bottom_but_text">节目单生成</span>
		  </view>
		</view>
	</view>
</template>

<script>
export default{
	name:'preview',
	data(){
		return{
			program:[
				{
					serial:'1',
					content:'习近平：以史为鉴鉴鉴鉴鉴鉴鉴鉴鉴',
					checked:''
				},
				{
					serial:'2',
					content:'国家主席',
					checked:''
				},
				
				{
					serial:'3',
					content:'今日报告',
					checked:''
				},
				
				{
					serial:'4',
					content:'习近平：以史为鉴…',
					checked:''
				},
				
				{
					serial:'5',
					content:'习近平：以史为鉴…',
					checked:''
				},
				{
					serial:'5',
					content:'习近平：以史为鉴…',
					checked:''
				},
				{
					serial:'5',
					content:'习近平：以史为鉴…',
					checked:''
				},
				{
					serial:'5',
					content:'习近平：以史为鉴…',
					checked:''
				},
				{
					serial:'5',
					content:'习近平：以史为鉴…',
					checked:''
				},{
					serial:'5',
					content:'习近平：以史为鉴…',
					checked:''
				},{
					serial:'5',
					content:'习近平：以史为鉴…',
					checked:''
				},
			],
			checkedAll:'',
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			changeSelectStybg:'',
		}
	},
	mounted() {
		
	},
	methods:{
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop
		},
		// 全选
		CheckedAll() {
			if(this.checkedAll == true){
				this.program.map(val => {
					val.checked = true;
				})
			}else{
				this.program.map(val => {
					val.checked = false;
				})
			}
			
		},
		//生成
		generate(){
			
		},
		//上移
		up(){
			
		},
		//下移
		descend(){
			
		},
		Checked(index){
			console.log(index)
			this.changeSelectStybg = index
		},
	}
}
</script>

<style scoped lang="scss">
	.page{
		background-color: #fdc986;
		min-height: 100vh;
		overflow: hidden;
	}

  .page-menu{
    padding: 40rpx;

    .page_title{
      font-size: 35rpx;
      font-weight: 550;
      color: #800A0B;
    }
    .info_data{
      margin-top: 30rpx;
      width: 100%;
      max-height: 970rpx;
      // line-height: 100rpx;
      background-color: #81120D;
      // padding-bottom: 10rpx;
    }
    .info_table{
      background-color: #81120D;
    }
    .demo-layout{
      color: #FFC695;
	  height: 120rpx;
	  font-size: 30rpx;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	  // margin-top: 50rpx;
	  // margin-bottom: 40rpx;
    }
	.cen_title{
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		white-space: nowrap;
	}
	.demo-layoutTwo{
		color: #FFC695;
		height: 120rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
    .checkbox{
      margin-top: 35rpx;
      margin-left: 10rpx;
    }
    .row_u{
      border-top: #FFC694 solid 1px;
    }
    .wrap_right_bottom_scroll{
      width: 100%;
      max-height: 855rpx;
    }
  }

  .page-device{
    padding-left: 40rpx;
    padding-right: 40rpx;
    padding-top: 20rpx;

    .page_title{
      font-size: 35rpx;
      font-weight: 550;
      color: #800A0B;
    }
    // .info_data{
    //   margin-top: 30rpx;
    //   width: 100%;
    //   height: 300rpx;
    //   line-height: 100rpx;
    //   background-color: #81120D;
    //   padding-bottom: 10rpx;
    // }
    .info_table{
      background-color: #81120D;
    }
    // .demo-layout{
    //   color: #FFC695;
    // }
    .checkbox{
      margin-top: 35rpx;
      margin-left: 10rpx;
    }
  }

  .bottom{
    background-color: #FFC18A;
    border-top: #93110A solid 1rpx;
    position: fixed;
    bottom: 0;
    // left: 0;
    height: 130rpx;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bottom_but{
    background-image: url(../../static/img/login_imgTwo.png);
    background-repeat: no-repeat;
    height: 100rpx;
    background-size: 100% 100%;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFC695;
  }
  .compileView{
	  // height: 50rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
  }
  .operation{
	  // color: #FFC695;
	  // text-align: center;
	  // margin-top: 35rpx;
	  
	  color: #FFC695;
	  height: 120rpx;
	  font-size: 29rpx;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
  }
  .imgUp{
	  // margin-top: 35rpx;
	  width: 30rpx;
	  height: 40rpx;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
  }
  .imgDescend{
	  // margin-left: 25rpx;
	  // margin-top: 35rpx;
	  // width: 20rpx;
	  // height: 30rpx;
	  margin-left: 30rpx;
	  width: 30rpx;
	  height: 40rpx;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
  }
  .changeStylebg{
  	background-color: #7F090B;
  }
</style>
